<template>
  <div class="w-full">
    <div class="flex space-x-4">
      <div class="text-h6 text-primary">{{ 标题 }}</div>
      <el-button type="primary" icon="plus" @click="加一行()" plain size="small">加一行</el-button>
    </div>
    <el-table style="width: 100%" tooltip-effect="dark" :data="单项组" row-key="id" border>
      <el-table-column align="left" label="名称" prop="名称" width="120">
        <template #default="{ row, $index }">
          <el-input :disabled="row.disabled" v-model="row.名称" :ref="setInputRef($index)" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="内容" prop="内容" width="200">
        <template #default="{ row }">
          <el-mention v-model="row.内容" type="textarea" placeholder="" />
        </template>
      </el-table-column>

      <el-table-column align="left" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="danger" link icon="delete" @click="删行(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup>
import { ref, reactive, computed, nextTick } from 'vue'
// import * as util from 'amtf/util/utils';
import *  as util from '@/amtf/utils'

// const 单项组 = reactive([])
// const 拟删除子表ids = {}
// const 单项组 = reactive([])
const inputRefs = ref([]);

const 单项组 = defineModel()

const props = defineProps({
  标题: {
    type: String,
    default: '标题'
  }
})

// import use子表 from '@/amtf/hooks/use子表';
// const 子表 = use子表({ 父组件: props.父组件 })
// const {单项组} = 子表
// props.父组件.子表=子表

// function 初始化(params) {
//   util.数组重新赋值(单项组, params)
// }

// 设置 ref 到 inputRefs 数组  
const setInputRef = (index) => {  
  return (el) => {  
    if (el) {  
      inputRefs.value[index] = el;  
    }  
  };  
};  

async function 加一行() {
  console.log(`单项组.value 👉`, 单项组.value)
  单项组.value.unshift({
  })
  // 等待 DOM 更新
  await nextTick();
  console.log(`inputRefs 👉`,inputRefs)
  const newIndex = 0;
  if (inputRefs.value[newIndex]) {
    inputRefs.value[newIndex].focus();
  }
}

// const getInputRefName = (row) => `input-${row.id}`; // 生成唯一的 ref 名称  

const 删行 = (row) => {
  util.删除元素(单项组.value, row)
}

// const 提交 = async () => {
//   console.log(`单项组 👉`, 单项组)
// }

// defineExpose({ 单项组, 初始化, 拟删除子表ids })

</script>

<style scoped>
:deep(.el-table .el-table__cell) {
  z-index: auto;
}
</style>
